<template>
  <Dialog :visible="visibleBindUserLabel" :title="rows.appName + ' - ' + $t('绑定用户标签')" width="65%" @close="clearForm"
          :footer="false">
    <el-form label-width="80px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item :label="$t('标题')">
            <el-input v-model="page.title" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" label-width="0px">
            <el-button type="primary" @click="getTableData">{{ $t('查询') }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <div style="text-align: right;margin-bottom: 10px">
        <el-button type="primary" @click="addLabel">{{ $t('新增') }}</el-button>
        <el-button type="primary" @click="copyOtherProduct">{{ $t('复制到其他APP') }}</el-button>
      </div>
      <Table :table-data="tableData" :table-column="tableColumn"
             @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
             :selection="true"
             @handleSelectionChange="(rows)=> {selectLabelRows = rows}"
             :select-rows="selectLabelRows"
             :page="page">
        <template slot="labelListStr" slot-scope="{row}">
          <el-tag v-for="item in formatLabel(row.labelListStr)" :disable-transitions="true" style="margin: 0 5px 5px 0 "
                  :key="item">{{
              item
            }}
          </el-tag>
        </template>
        <template slot="rate" slot-scope="{row}">
          <div v-if="row.rate" :style="{color:row.rateType === 1 ? '#e71212' : '#50e81a' }">
            <i :class="row.rateType === 1 ? 'el-icon-top' : 'el-icon-bottom' "
            /> {{ row.rate }}%
          </div>
        </template>
        <template slot="rateAmount" slot-scope="{row}">
          <div v-if="row.rateAmount" :style="{color:row.rateType === 1 ? '#e71212' : '#50e81a' }">
            <i :class="row.rateType === 1 ? 'el-icon-top' : 'el-icon-bottom' "/>
            {{ row.rateAmount }}
          </div>
        </template>
        <template slot="handle" slot-scope="{row}">
          <el-button type="text" @click="deleteLabel(row)">{{ $t('删除') }}</el-button>
        </template>
      </Table>
    </div>
    <Dialog append-body width="55%" :visible.sync="addLabelVisible" :title="$t('新增用户标签组合')"
            @confirm="addConfirm"
            @cancel="addLabelVisible = false"
    >
      <Table :table-data="addLabelTableData"
             :selection="true"
             @handleSizeChange="addHandleSizeChange"
             @handleCurrentChange="addHandleCurrentChange"
             @handleSelectionChange="(rows)=> {selectRows = rows}"
             :select-rows="selectRows"
             :table-column="addLabelTableColumn" :page="addPage">
        <template slot="labelListStr" slot-scope="{row}">
          <el-tag v-for="item in formatLabel(row.labelListStr)" :disable-transitions="true" style="margin: 0 5px 5px 0 "
                  :key="item">{{
              item
            }}
          </el-tag>
        </template>
        <template slot="rate" slot-scope="{row}">
          <div v-if="row.rate" :style="{color:row.rateType === 1 ? '#e71212' : '#50e81a' }">
            <i :class="row.rateType === 1 ? 'el-icon-top' : 'el-icon-bottom' "
            /> {{ row.rate }}%
          </div>
        </template>
        <template slot="rateAmount" slot-scope="{row}">
          <div v-if="row.rateAmount" :style="{color:row.rateType === 1 ? '#e71212' : '#50e81a' }">
            <i :class="row.rateType === 1 ? 'el-icon-top' : 'el-icon-bottom' "/>
            {{ row.rateAmount }}
          </div>
        </template>
      </Table>
    </Dialog>
    <!--    复制标签给APP-->
    <Dialog :append-body="true" :visible.sync="visibleCopyLabel"
            @close="selectProductList = []"
            @cancel="visibleCopyLabel = false"
            @confirm="copyLabelConfirm"
            width="500px"
            :title="$t('复制标签给选中的APP')">
      <el-select v-model="selectProductList" style="width: 100%" clearable multiple>
        <el-option v-for="item in productList" :label="item.appName" :key="item.productId"
                   :value="item.productName"></el-option>
      </el-select>
    </Dialog>
  </Dialog>
</template>

<script>
import {
  selectProductBindLabel,
  selectProductUnbindLabel,
  addProductLabel,
  deleteProductLabel,
  reuseProductLabel
} from "@/api/product"
import {selectProduct} from "@/api/system";

export default {
  name: "bindUserLabel",
  props: ['visibleBindUserLabel', 'rows'],
  data() {
    return {
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableColumn: [
        {label: this.$t('标题'), prop: 'title'},
        {label: this.$t('标签组合'), prop: 'labelListStr', slot: 'labelListStr'},
        {label: this.$t('初始可借金额提升'), prop: 'amount', minWidth: 150},
        {label: this.$t('初始服务费金额'), prop: 'rateAmount', slot: 'rateAmount', minWidth: 150},
        {label: this.$t('初始服务费利率'), prop: 'rate', slot: 'rate', minWidth: 150},
        {label: this.$t('备注'), prop: 'remark', minWidth: 150},
        {label: this.$t('创建时间'), prop: 'creationTime', minWidth: 150},
        {label: this.$t('创建人'), prop: 'creationName'},
        {label: this.$t('操作'), slot: 'handle', minWidth: 100, fixed: 'right'},
      ],
      addLabelVisible: false,
      addPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      productList: [],
      selectRows: [],
      addLabelTableData: [],
      addLabelTableColumn: [
        {label: this.$t('标题'), prop: 'title'},
        {label: this.$t('标签组合'), prop: 'labelListStr', slot: 'labelListStr'},
        {label: this.$t('初始可借金额提升'), prop: 'amount', minWidth: 150},
        {label: this.$t('初始服务费金额'), prop: 'rateAmount', slot: 'rateAmount', minWidth: 150},
        {label: this.$t('初始服务费利率'), prop: 'rate', slot: 'rate', minWidth: 150},
      ],
      visibleCopyLabel: false,
      selectLabelRows: [],
      selectProductList: []
    }
  },
  watch: {
    visibleBindUserLabel(value) {
      if (value) {
        this.getTableData()
      }
    }
  },
  methods: {
    async getTableData() {
      const params = {
        ...this.page,
        productName: this.rows.productName,
      }
      const res = await selectProductBindLabel(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page.total = total
      }
    },
    async addLabel() {
      await this.getUnBindLabel()
      this.addLabelVisible = true
    },
    getUnBindLabel() {
      selectProductUnbindLabel({...this.addPage, productName: this.rows.productName}).then(res => {
        if (res.code === 1) {
          const {list, total} = res.data
          this.addLabelTableData = list
          this.addPage.total = total
        }
      })
    },

    handleSizeChange(value) {
      this.page.pageSize = value
      this.getTableData()
    },
    handleCurrentChange(value) {
      this.page.pageNum = value
      this.getTableData()
    },
    addHandleSizeChange(value) {
      this.addPage.pageSize = value
      this.getUnBindLabel()
    },
    addHandleCurrentChange(value) {
      this.addPage.pageNum = value
      this.getUnBindLabel()
    },
    copyOtherProduct() {
      if (this.selectLabelRows.length === 0) return this.$message.error(this.$t('请先选择标签'))
      selectProduct().then(res => {
        this.productList = res.data
      })
      this.visibleCopyLabel = true
    },
    async addConfirm() {
      if (this.selectRows.length === 0) return this.$message.error(this.$t('请先选择标签'))
      const params = {
        idList: this.selectRows.map(item => item.id),
        productName: this.rows.productName
      }
      const res = await addProductLabel(params)
      if (res.code === 1) {
        this.getTableData()
        this.addLabelVisible = false
        this.$message.success(this.$t('新增成功'))
      }
    },

    async copyLabelConfirm() {
      if (this.selectProductList.length <= 0) return this.$message.error(this.$t('请选择APP'))
      const res = await reuseProductLabel({
        productName: this.rows.productName,
        target: this.selectProductList,
        idList: this.selectLabelRows.map(item => item.libraryId)
      })
      if (res.code === 1) {
        this.visibleCopyLabel = false
        this.getTableData()
        this.$message.success(this.$t('操作成功'))
      }
    },
    deleteLabel({id}) {
      this.$confirm(this.$t('确定删除?'), this.$t('提示'), {
        type: 'warning'
      }).then(async () => {
        const res = await deleteProductLabel({id})
        if (res.code === 1) {
          this.$message.success(this.$t('删除成功'))
          this.getTableData()
        }
      }).catch(() => {
      })
    },
    formatLabel(value) {
      const tagsValue = value.split('&')
      return tagsValue
    },
    clearForm() {
      this.$emit('update:visibleBindUserLabel', false)
    }
  }
}
</script>

<style scoped>

</style>
